
<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta charset="utf-8">
    <script src="echarts.min.js"></script>
    <script src="inner_mongolia.js"></script> <!-- 内蒙古自治区地图数据 -->
</head>
<body style="height: 100%; margin: 0">
<div id="main" style="width: 100%; height: 100%;"></div>
<script type="text/javascript">    var chart = echarts.init(document.getElementById('main'));

    var option = {
        title: {
            text: '内蒙古自治区地图',
            left: 'center'
        },
        tooltip: {
            trigger: 'item',
            formatter: '{b}'
        },
        visualMap: {
            min: 0,
            max: 1000,
            left: 'left',
            top: 'bottom',
            text: ['高', '低'],
            calculable: true
        },
        series: [
            {
                name: '内蒙古自治区',
                type: 'map',
                mapType: 'inner_mongolia',
                roam: true,
                zoom: 1.4, // 调整缩放比例，使地图更大
                center: [110, 42], // 设置地图中心坐标
                label: {
                    show: true,
                    fontSize: 12 // 设置字体大小
                },
                data: []
            }
        ]
    };

    chart.setOption(option);

    chart.on('click', function (params) {
         // 清除之前的高亮状态
<!--        chart.dispatchAction({-->
<!--            type: 'unhighlight'-->
<!--        });-->
<!--        // 高亮新的城市-->
<!--        selectCity(params.name);-->
<!--          // 发送点击事件到 Android-->
        window.android.onCitySelected(params.name);
    });

    // 添加方法来处理初始选中城市
<!--    function selectCity(cityName) {-->
<!--    console.log('Selected city:', cityName);-->
<!--        chart.dispatchAction({-->
<!--            type: 'highlight',-->
<!--            seriesIndex: 0,-->
<!--            name: cityName-->
<!--        });-->
<!--    }-->
</script>
</body>
</html>